<template>
    <div class="root">
        <h1 v-if="listObj.shwoWelcom">欢迎使用图片搜索</h1>
        <h1 v-if="listObj.shwoComing">正在加载中!!!!!</h1>
        <h1 v-if="listObj.errorMsg.length > 0">{{ listObj.errorMsg }}</h1>
        <div v-show="listObj.list.length" class="item" v-for="model in listObj.list" :key=model.id>
            <a :href=model.pageURL target="_blank" class="item">
                <img :src= model.webformatURL
                object-fit: contain alt="">
                <p> {{ model.user }} </p>
            </a>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            listObj:{
                list:[],
                shwoWelcom:true,
                shwoComing:false,
                errorMsg:""
            }
        }
    },
    methods:{
        getListObj(listObj){
            this.listObj = listObj
        }
    },
    mounted(){
        this.$bus.$on('getListObj',this.getListObj)
    }
}
</script>

<style lang="less" scoped>
.root{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-content: space-between;
    gap: 10px;

    .item {
    width: calc((100% - 50px) / 6);
    height: 200px;
    background-color: aliceblue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
        width: auto;
        max-width: 150px;
        height: 100px;
    }
    p{
        margin: 0px;
    }
}
}

</style>
